<template>
  <div class="header">
    <router-link to="/">
      <img src="@/assets/喜马拉雅.svg" alt="" />
    </router-link>
    <div style="float: left"><Search @focus="$emit('showSearch')" /></div>
    <div>
      <span>打开App</span>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "HomeSearch",
  });
</script>
<script lang="ts" setup>
  // 引入
  import { Search } from "vant";
</script>

<style scoped>
  .header {
    width: 375px;
    height: 50px;
    padding: 15px 15px 5px 15px;
    background: #ffffff;
    box-sizing: border-box;
  }
  .header img {
    width: 80px;
    height: 30px;
    float: left;
  }
  .van-search {
    margin-left: 15px;
    padding: 0px;
    width: 165px !important;
  }
  .header span {
    margin-left: 15px;
    font-size: 12px;
    padding: 8px 10px;
    border: 1px solid #f66847;
    border-radius: 15px;
    color: #f66847;
  }
</style>
